This style of 3D chart is not supported natively but is pretty easy to achieve - especially as all the source code is below and you can just copy it!
This goes in the documents header:<script src="RGraph.common.core.js"></script> <script src="RGraph.bar.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="650" height="300">
[No canvas support]
</canvas>
This is the code that generates the chart:
<script>
var gutterLeft = 60,
gutterRight = 25,
gutterTop = 45,
gutterBottom = 65,
hmargin = 15,
ymax = 35,
data = [
// If you don't need a third dataset take out this FIRST
// dataset and replace it with the word: null
// null, // [12,16,10,12,13,15,16]
[5,16,10,12,13,15,16],
[20,21,24,23,18,19,20],
[35,34,32,28,26,35,34]
],
colors = [
'Gradient(#696:#0f0:#0f0)',
'Gradient(#966:#f00:#f00)',
'Gradient(#669:blue:blue)'
],
labels = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];
var bar = new RGraph.Bar({
id: 'cvs',
data: data[2],
options: {
textAccessible: true,
variant: '3d',
variantThreedYaxis: false,
variantThreedXaxis: false,
strokestyle: 'rgba(0,0,0,0)',
colors: [colors[2]],
shadow: true,
shadowOffsetx: 10,
backgroundGridColor: '#ccc',
backgroundGridAutofitNumhlines: 5,
backgroundGridAutofitNumvlines: 14,
scaleZerostart: true,
axisColor: '#ddd',
gutterBottom: gutterBottom,
gutterTop: gutterTop,
gutterLeft: gutterLeft,
gutterRight: gutterRight,
hmargin: hmargin,
ymax: ymax,
noaxes: true,
ylabels: false
}
}).grow();
var bar2 = new RGraph.Bar({
id: 'cvs',
data: data[1],
options: {
textAccessible: true,
variant: '3d',
variantThreedYaxis: false,
variantThreedXaxis: false,
strokestyle: 'rgba(0,0,0,0)',
colors: [colors[1]],
shadow: true,
shadowOffsetx: 10,
shadowColor: 'rgba(0,0,0,0.5)',
backgroundGrid: false,
axisColor: '#ddd',
ylabels: false,
labels: [],
gutterBottom: gutterBottom - 10,
gutterTop: gutterTop + 10,
gutterLeft: gutterLeft - 25,
gutterRight: gutterRight + 25,
hmargin: hmargin,
ymax: ymax,
noaxes: true
}
}).grow();
if (data[0]) {
var bar3 = new RGraph.Bar({
id: 'cvs',
data: data[0],
options: {
textAccessible: true,
variant: '3d',
variantThreedYaxis: false,
variantThreedXaxis: false,
strokestyle: 'rgba(0,0,0,0)',
colors: [colors[0]],
labels: labels,
shadow: true,
shadowOffsetx: 10,
shadowColor: 'rgba(0,0,0,0.5)',
backgroundGrid: false,
axisColor: '#ddd',
unitsPost: 'km',
gutterTop: gutterTop + 20,
gutterBottom: gutterBottom - 20,
gutterLeft: gutterLeft - 40,
gutterRight: gutterRight + 40,
hmargin: hmargin,
ymax: ymax,
noaxes: true,
scaleZerostart: true,
ylabels: false
}
}).grow();
}
var yaxis = new RGraph.Drawing.YAxis({
id: 'cvs',
x: 640,
options: {
max: bar.scale2.max,
colors: ['rgba(0,0,0,0)'],
textColor: 'black',
gutterTop: gutterTop,
gutterBottom: gutterBottom + 35,
align: 'right'
}
}).draw();
</script>